<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>

<table id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
        <a class ="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="./layui/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo',
            url: 'http://47.107.60.140:8888/user/' + '?timestamp=' + new Date().getTime(),  //获取后台json

            cellMinWidth: 95,
            page: false,
            height: "full-125",
            limits: [10, 20, 30, 40],
            limit: 10,
            id: "testTable",

            request: {
                pageName: 'pageNum' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },

            parseData: function (res) {
                console.log('返回的值', res);
                console.log('返回的值', res.code);
                return {
                    "code": res.code,
                    "data": res.data.data, //解析数据列表
                    "count": res.data.pageTotal,
                };
            },


            initSort: {
                field: 'id' //排序字段，对应 cols 设定的各字段名
                , type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            },

            cols: [[
                {type: "checkbox", fixed: "left", width: 50},
                {field: 'id', title: '用户账号', align: "center"},
                {field: 'name', title: '用户名', minWidth: 100, align: 'center'},
                {field: 'type', title: '用户类型',minWidth: 100, align: 'center'},
                {field: 'phone', title: '用户联系方式', minWidth: 100, align: 'center'},
                {field: 'userStatus', title: '状态', minWidth: 100, align: 'center'},
                {title: '操作', minWidth: 175, templet: '#barDemo', fixed: "right", align: "center"}

            ]]
            , page: true
        });


        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            console.log(data);
            console.log(data.id);
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看

            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });

    });


</script>
</body>
</html>